<!doctype html>
<html ng-app>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller='StudentListController'>
      <ul>
        <li ng-repeat='student in students'>
          <a ng-href='/student/view/{{student.id}}'>{{student.name}}</a>
        </li>
      </ul>
      <button ng-click="insertTom()">Insert Tom</button>
    </div>
    <script>
      var students = [{name:'Mary Contrary', id:'1'},
        {name:'Jack Sprat', id:'2'},
        {name:'Jill Hill', id:'3'}];

      function StudentListController($scope) {
        $scope.students = students;

        $scope.insertTom = function () {
          $scope.students.splice(1, 0, {name:'Tom Thumb', id:'4'});
        };
      }
    </script>
  </body>
</html>
